<template>
  <yd-ls-box>
    <yd-ls-layout title="填写信息" :onfoot=false >
      <div class="yd-ls-height"></div>
      <yd-cell-group>
        <yd-cell-item class="yd-ls-reginfo-cell-item" arrow>
          <span slot="left">姓名</span>
          <input
            slot="right"
            type="text"
            unselectable="on"
            onfocus="this.blur()"
            @click.stop="popupname()"
            v-model="name"
            readonly
            placeholder="请填写患者的姓名">
        </yd-cell-item>
        <yd-cell-item class="yd-ls-reginfo-cell-item" @click.native="showsex = true" arrow>
          <span slot="left">性别</span>
          <input
            slot="right"
            type="text"
            unselectable="on"
            onfocus="this.blur()"
            @click.stop="showsex = true"
            v-model="sex"
            readonly
            placeholder="请选择性别">
        </yd-cell-item>
        <yd-cell-item class="yd-ls-reginfo-cell-item" arrow>
          <span slot="left">年龄</span>
          <yd-datetime
            startDate="1900-01-01"
            endDate="2022-12-31"
            type="date"
            v-model="age"
            :initEmit="false" 
            placeholder="请选择出生年龄" 
            slot="right">
          </yd-datetime>
        </yd-cell-item>
        <yd-cell-item class="yd-ls-reginfo-cell-item"  arrow>
          <span slot="left">地址</span>
          <input
            slot="right"
            type="text"
            unselectable="on"
            onfocus="this.blur()"
            @click.stop="showarea = true"
            v-model="address"
            readonly placeholder="请选择所在地区">
        </yd-cell-item>
      </yd-cell-group>

      <!--展示 姓名-->
      <yd-popup v-model="showname" position="right" width="100%">
        <yd-ls-popup-header
          headname="填写姓名"
          btnname="确定"
          @handle-popup-back="popupback"
          @handle-popup-button="confirmName">
        </yd-ls-popup-header>

        <yd-cell-group>
          <yd-cell-item>
            <input slot="right" maxlength="15" type="text" placeholder="请输入真实姓名" v-model="name">
          </yd-cell-item>
        </yd-cell-group>
      </yd-popup>
      <!--展示 性别-->
      <yd-actionsheet :items="sexitem" v-model="showsex"></yd-actionsheet>
      <!--展示 地址-->
      <yd-cityselect v-model="showarea" :callback="areafun" :items="district"></yd-cityselect>
      <div class="yd-ls-height"></div>
    </yd-ls-layout>
    <yd-ls-button btnname="下一步" @handle-button="nextstep"></yd-ls-button>
  </yd-ls-box>
</template>

<style>
.yd-ls-reginfo-cell-item .yd-cell-left span {
  padding-right: 0.48rem;
}
.yd-ls-reginfo-cell-item .yd-cell-left .yd-ls-reginfo-cell-item-placeholder {
  color: #a9a9a9;
}
</style>
<script>
import ydLsBox from "../../../components/yd-ls-box.vue";
import ydLsLayout from "../../../components/yd-ls-layout.vue";
import ydLsPopupHeader from "../../../components/yd-ls-popup-header.vue";
import ydLsButton from "../../../components/yd-ls-button.vue";
import District from "ydui-district/dist/jd_province_city_id";
import { mapGetters } from "vuex";
import api from "../../../axios/api";

export default {
  name: "reginfo",
  data() {
    return {
      urls: "index.html#/reg",
      name: "",
      oldname: "",
      isname: false,
      showname: false,
      sex: "",
      showsex: false,
      sexitem: [
        {
          label: "男",
          callback: () => {
            this.sex = "男";
          }
        },
        {
          label: "女",
          callback: () => {
            this.sex = "女";
          }
        }
      ],
      age: "",
      showarea: false,
      address: "",
      addressObj: {},
      district: District
    };
  },
  computed: {
    ...mapGetters(["getMid"])
  },
  methods: {
    init() {},
    popupname() {
      if (!this.name) {
        this.isname = true;
      } else {
        this.isname = false;
      }
      this.showname = true;
    },
    popupback() {
      if (this.isname && !this.oldname) {
        this.name = "";
      } else {
        this.name = this.oldname;
      }
      this.showname = false;
    },
    confirmName() {
      if (!!!this.name.replace(/^\s+|\s+$/g, "")) {
        this.notify("请填写姓名！");
        this.name = "";
        return;
      }
      this.oldname = this.name;
      this.showname = false;
    },
    areafun(ret) {
      this.address = ret.itemName1 + " " + ret.itemName2;
      this.addressObj = {
        pname: ret.itemName1,
        cname: ret.itemName2,
        pid: ret.itemValue1,
        cid: ret.itemValue2
      };
    },
    nextstep() {
      if (!!!this.name) {
        this.notify("请补充填写完姓名！");
        return;
      }
      if (!!!this.sex) {
        this.notify("请补充填写完性别！");
        return;
      }
      if (!!!this.address) {
        this.notify("请补充填写完地址！");
        return;
      }

      let params = {
        mid: 0,
        name: this.name,
        sex: this.sex,
        birthday: this.age,
        province_id: this.addressObj.pid,
        province: this.addressObj.pname,
        city_id: this.addressObj.cid,
        city: this.addressObj.cname,
        openId: localStorage.openId
      };
      this.$dialog.loading.open(api.default_loading_txt);
      this.axios.post(api.reg_info, params).then(m => {
        this.$dialog.loading.close()
        if (m.data.retcode != 0) {
          this.notify(m.data.retmsg);
          return;
        }
        this.$router.push({ path: "regsick" });
      }).catch(err=>{
          this.$dialog.loading.close()
          this.$dialog.alert({mes: JSON.stringify(err)})
        })
    },
    notify(info) {
      this.$dialog.notify({
        mes: info,
        timeout: 1500
      });
    }
  },
  mounted() {
    this.init();
  },
  components: { ydLsBox, ydLsLayout, ydLsPopupHeader, ydLsButton }
};
</script>
